<template>
  <div>
    <h1>Tab组件</h1>
    {{ arr }}
    <ul v-if="arr.length < list.length">
      <template v-for="(v, i) in list">
        <li  :key="v.id" v-if="i === activeIndex">
          <h3>题目{{ i + 1 }}:{{ v.title }}</h3>
          <p v-for="(item, j) in v.question" :key="item.id" @click="handleCheck">
            <input type="radio" :name="v.id" :value="numberToA(j)" />
            <b>{{ item.subject }}</b>
          </p>
          <button @click="activeIndex++">下一题</button>
          {{ v.anther }}
        </li>
      </template>
    </ul>
    <div v-else>
      <h1>你的分数是： {{ score }}</h1>
    </div>
  </div>
</template>


<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      arr: [],
      activeIndex: 0,
    };
  },
  methods: {
    numberToA(num) {
      switch (num) {
        case 0:
          return "A";
        case 1:
          return "B";
        case 2:
          return "C";
        case 3:
          return "D";
      }
    },
    handleCheck(e) {
      this.$set(this.arr, this.activeIndex, e.target.value)
    }
  },
  computed: {
    score() {
      let s = 0;
      this.arr.forEach((item, i) => {
        if(item  === this.list[i].anther) {
          s +=10
        }
      })
      return s;
    }
  }
};
</script>